<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Cascader 级联选择器</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">

</head>
<body>
<div id="app" class="">
	<el-affix :offset="20">
		<el-button type="primary" @click="showValue">查看所选数据（推荐使用“可搜索”里面的）</el-button>
	</el-affix>
	
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">有两种触发子菜单的方式</p>
	<p class="desc">只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。 通过props.expandTrigger可以定义展开子级菜单的触发方式。</p>
	<div class="block">
		<span class="demonstration">子选项在鼠标单击时展开（默认）：</span>
		<el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
	</div>
	<div class="block">
		<span class="demonstration">子选项在鼠标悬停时展开：</span>
		<el-cascader v-model="value" :options="options" @change="handleChange" :props="props0"></el-cascader>
	</div>
	
	<el-divider content-position="left">有禁用选项</el-divider><!-- =============================================================== -->
	<p class="desc">通过在数据源中设置 disabled 字段来声明该选项是禁用的</p>
	<p class="desc">本例中，options指定的数组中的第一个元素含有disabled: true键值对，因此是禁用的。 在默认情况下，Cascader 会检查数据中每一项的disabled字段是否为true，如果你的数据中表示禁用含义的字段名不为disabled，可以通过props.disabled属性来指定（详见下方 API 表格）。 当然，value、label和children这三个字段名也可以通过同样的方式指定</p>
	<div class="block">
		<span class="demonstration">子选项在鼠标悬停时展开：</span>
		<el-cascader v-model="value" :options="options" @change="handleChange" :props="props0"></el-cascader>
	</div>
	
	<el-divider content-position="left">可清空</el-divider><!-- =============================================================== -->
	<p class="desc">通过 clearable 设置输入框可清空</p>
	<div class="block">
		<span class="demonstration">可清空：</span>
		<el-cascader v-model="value" :options="options" @change="handleChange" :props="props" clearable></el-cascader>
	</div>
	
	<el-divider content-position="left">仅显示最后一级</el-divider><!-- =============================================================== -->
	<p class="desc">可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。</p>
	<p class="desc">属性show-all-levels定义了是否显示完整的路径， 将其赋值为 false 则仅显示最后一级</p>
	<div class="block">
		<span class="demonstration">仅显示最后一级：</span>
		<el-cascader v-model="value" :options="options" @change="handleChange" :props="props" :show-all-levels="false"></el-cascader>
	</div>
	
	<el-divider content-position="left">多选</el-divider><!-- =============================================================== -->
	<p class="desc">在标签中添加 :props="props" 并设置 props = { multiple: true } 来开启多选模式</p>
	<p class="desc">使用多选时，所有选中的标签将默认显示。 您可以设置 collapse = true 将选中的标签折叠。 当鼠标悬停折叠文字时，您可以使用 collapse-tags-tooltip 属性来查看它们</p>
	<div class="block">
		<span class="demonstration">多选：</span>
		<el-cascader v-model="value" :options="options" @change="handleChange" :props="props" :show-all-levels="false" clearable></el-cascader>
	</div>
	<div class="block">
		<span class="demonstration">显示多选数量：</span>
		<el-cascader v-model="value" :options="options" @change="handleChange" :props="props" collapse-tags clearable></el-cascader>
	</div>
	<div class="block">
		<span class="demonstration">tooltip展开详情：</span>
		<el-cascader v-model="value" :options="options" @change="handleChange" :props="props" collapse-tags collapse-tags-tooltip clearable></el-cascader>
	</div>
	
	<el-divider content-position="left">选择任意一级选项</el-divider><!-- =============================================================== -->
	<p class="desc">在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。 启用该功能后，可让父子节点取消关联，选择任意一级选项</p>
	<p class="desc">可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的</p>
	<div class="block">
		<span class="demonstration">单选：</span>
		<el-cascader v-model="value" :options="options" @change="handleChange" :props="props1"></el-cascader>
	</div>
	<div class="block">
		<span class="demonstration">多选：</span>
		<el-cascader v-model="value" :options="options" @change="handleChange" :props="props2"></el-cascader>
	</div>
	
	<el-divider content-position="left">动态加载</el-divider><!-- =============================================================== -->
	<p class="desc">当选中某一级时，动态加载该级下的选项。</p>
	<p class="desc">通过lazy开启动态加载，并通过lazyload来设置加载数据源的方法。 lazyload方法有两个参数，第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)。 为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为leaf，可通过props.leaf修改)。 否则，将以有无子节点来判断其是否为叶子节点。</p>
	<div class="block">
		<span class="demonstration">动态加载：</span>
		<el-cascader v-model="value" @change="handleChange" :props="props3" clearable></el-cascader>
	</div>
	
	<el-divider content-position="left">可搜索</el-divider><!-- =============================================================== -->
	<p class="desc">可以快捷地搜索选项并选择。</p>
	<p class="desc">通过添加filterable来启用过滤。 Cascader 会匹配所有节点的标签和它们的亲节点的标签，是否包含有输入的关键字。 你也可以用filter-method自定义搜索逻辑，接受一个函数，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中。</p>
	<div class="block">
		<span class="demonstration">单选：</span>
		<el-cascader v-model="value0" :options="options" @change="handleChange" :props="props0" placeholder="试试搜索衣服" filterable clearable></el-cascader>
	</div>
	<div class="block">
		<span class="demonstration">多选：</span>
		<el-cascader ref="myMultiple" v-model="value" :options="options" @change="handleChange" :props="props" placeholder="试试搜索衣服" filterable clearable></el-cascader>
	</div>
	<el-button type="primary" @click="seeSelectionDataId()">查看选中的数据（用这个更靠谱）</el-button>
	
	<el-divider content-position="left">自定义节点内容</el-divider><!-- =============================================================== -->
	<p class="desc">可以自定义备选项的节点内容</p>
	<p class="desc">你可以通过 scoped slot 自定义节点的内容。您将能够访问作用域中的节点和数据，分别代表当前节点的node对象和节点数据</p>
	<div class="block">
		<span class="demonstration">自定义节点内容：</span>
		<el-cascader v-model="value" :options="options" @change="handleChange">
			<template #default="{ node, data }">
				<span>{{ data.label }}</span>
				<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
			</template>
		</el-cascader>
	</div>
	
	<el-divider content-position="left">级联面板</el-divider><!-- =============================================================== -->
	<p class="desc">级联面板是级联选择器的核心组件，与级联选择器一样，有单选、多选、动态加载等多种功能。</p>
	<p class="desc">和级联选择器一样，通过options来指定选项，也可通过props来设置多选、动态加载等功能，具体详情见下方API表格</p>
	<el-cascader-panel :options="options" /></el-cascader-panel>
	
	
</div>
</body>
<script>
const arr_options = [
	{
		value: 'guide',
		label: 'Guide，禁用的',
		disabled: true,
		children: [
			{
				value: 'disciplines',
				label: 'Disciplines',
				children: [
					{value: 'consistency',label: 'Consistency',},
					{value: 'feedback',label: 'Feedback',},
					{value: 'efficiency',label: 'Efficiency',},
					{value: 'controllability',label: 'Controllability',},
				],
			},
			{
				value: 'navigation',
				label: 'Navigation',
				children: [
					{value: 'side nav',label: 'Side Navigation',},
					{value: 'top nav',label: 'Top Navigation',},
				],
			},
		],
	},
	{
		value: 'china',
		label: '中国',
		children: [
			{
				value: 'hubei',
				label: '湖北',
				children: [
					{value: 'wuhan',label: '武汉',},
					{value: 'macheng',label: '麻城',},
					{value: 'yichang',label: '宜昌',},
					{value: 'xiantao',label: '仙桃',},
				],
			},
			{
				value: 'shanghai',
				label: '上海',
				children: [
					{value: 'minhang',label: '闵行',},
					{value: 'pudong',label: '浦东',},
				],
			},
		],
	},
	{
		value: 'goods',
		label: '商品',
		children: [
			{
				value: 'yifu',
				label: '衣服',
				children: [
					{value: 'top',label: '上衣',},
					{value: 'bonten',label: '裤子',},
				],
			},
			{
				value: 'wenju',
				label: '文具',
				children: [
					{value: 'bi',label: '笔',},
					{value: 'zhi',label: '纸',},
				],
			},
		],
	},
]
let optionId = 0;
const Main = {
	data() {
		return {
			msg: 'Hello Vue!!',
			value0: [],
			value: [],
			props: {
				//鼠标悬停时展开
				expandTrigger: 'hover',
				//多选
				multiple: true,
			},
			props0: {
				//鼠标悬停时展开
				expandTrigger: 'hover',
				//多选
				// multiple: true,
				checkStrictly: true,
			},
			props1: {
				checkStrictly: true,
			},
			props2: {
				checkStrictly: true,
				multiple: true,
			},
			props3: {
				lazy: true,
				lazyLoad(node, resolve){
					let id = node.value;
					let nodes = [];
					setTimeout(()=>{
						if(typeof(id) == "undefined"){
							nodes = [
								{value: 1, label: "湖北", leaf: false},
								{value: 2, label: "河北", leaf: false},
							]
						}else if(id == 1){
							nodes = [
								{value: 11, label: "武汉", leaf: false},
							]
						}else if(id == 2){
							nodes = [
								{value: 21, label: "郑州", leaf: false},
							]
						}else if(id == 11){
							nodes = [
								{value: 111, label: "武昌区", leaf: true},
								{value: 112, label: "江夏区", leaf: true},
							]
						}else if(id == 21){
							nodes = [
								{value: 211, label: "金水区", leaf: true},
								{value: 212, label: "平原区", leaf: true},
							]
						}
						// console.log(node.value);
						resolve(nodes)
					}, 300);
				},
				// lazyLoad0(node, resolve) {
				// 	// console.log(node);
				// 	const {level} = node
					
				// 	setTimeout(() => {
				// 		const nodes = Array.from({
				// 			length: level + 1
				// 		}).map((item) => ({
				// 			value: ++optionId,
				// 			label: `Option - ${optionId}`,
				// 			leaf: level >= 2,
				// 		}))
				// 		console.log(nodes);
				// 		// 调用' resolve '回调函数返回子节点数据并表示加载完成。
				// 		resolve(nodes)
				// 	}, 300)
				// }
			},
			
			options: arr_options
		}
	},
	methods:{
		handleChange(v){
			console.log(v)
		},
		showValue(){
			console.log(this.$data.value);
			// console.log(getCheckedNodes(true));
		},
		seeSelectionDataId(){
			console.log("选中的数据ID：", this.$refs.myMultiple.getCheckedNodes(true));
		},
	},
	watch: {
		value0:function(value){
			console.log("value0改变了：", value);
		}
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");

</script>
</html>